<template>
  <div v-if="userNick" class="mainStay">
    <van-nav-bar :border='false' style="background-color: rgba(0, 0, 0, 0);color: #1989fa;" placeholder>
      <template #right>
        <van-button @click="onColek" color="#1989fa" size="small" replace round type="default" text="退出登录">
        </van-button>
      </template>
      <template #title>
        <span style="color: #bd7e5e;" v-text="'个人主页'"></span>
      </template>
    </van-nav-bar>
    <div>
      <van-cell>
        <template #icon>
          <van-image fit="cover" round width="5rem" height="5rem"
            src="https://tse4-mm.cn.bing.net/th/id/OIP-C.BCkm5CTgDI6UbnMcBNP3pQHaEo?w=192&h=120&c=7&r=0&o=5&pid=1.7" />
        </template>
        <template #title>
          <span style="position: relative;top: 0.9375rem;left: 0.625rem;color: #47e28d;"
            v-text="userNick">法外狂徒-张三</span>
        </template>
        <template #label>
          <span style="position: relative;top: 0.9375rem;left: 0.625rem;">这个家伙很懒什么也没留下~</span>
        </template>
      </van-cell>
      <van-cell title="我的订单">
        <template #extra>
          <span @click="tabs = 0; showOrder = !showOrder" style="position: absolute;right: 1rem;color: #666;">全部
            <van-icon name="arrow" />
          </span>
        </template>
        <template #label>
          <div style="width: 100%;color: #1b0034;">
            <van-row type="flex" justify="space-around">
              <van-col v-for="(item, index) in myorderlist" :key="index" span="4.8">
                <van-icon @click="tabs = index + 1; showOrder = !showOrder" :badge="item.badge? item.badge : ''"
                  size="1.8rem" :name="item.img" />
                <div v-text="item.name"></div>
              </van-col>
            </van-row>
          </div>
        </template>
      </van-cell>
      <div class="modeCarp">
        <van-cell title-style="color: #d54f37;" title="我的会员" icon="gem-o" is-link />
        <van-cell title-style="color: #d54f37;" title="领券中心" icon="coupon-o" is-link />
        <van-cell title-style="color: #d54f37;" title="收货地址" icon="location-o" is-link />
        <van-cell title-style="color: #d54f37;" title="联系客服" icon="service-o" is-link />
      </div>
    </div>
    <div>
      <van-popup position="right" v-model="showOrder">
        <div style="width: 100vw;height: 100vh;border-left: 0.0625rem solid white;">
          <van-sticky>
            <van-search shape="round" placeholder="请输入搜索关键词">
              <template #left>
                <van-icon @click="showOrder = !showOrder" size="1.3rem" style="margin-right: 12px;" name="arrow-left" />
              </template>
            </van-search>
          </van-sticky>
          <van-tabs v-model="tabs" animated>
            <van-tab title="全部">
              <van-card v-for="(item, index) in goods_order_me" :key="index" :price="item.price" title="商品"
                thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" />
            </van-tab>
            <van-tab v-for="(item, index) in myorderlist" :key="index" :title="item.name">
              <van-card v-for="(item, index) in myorderlist[index].item" :key="index" :price="item.price" title="商品"
                thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" />
            </van-tab>
          </van-tabs>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
  import router from '@/router'
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: 'mainStay',
    data() {
      return {
        tabs: 0,
        showOrder: false,
        userNick: localStorage.getItem('userToken') || '',
        myorderlist: [{
            id: 0,
            name: '待付款',
            img: 'credit-pay',
            badge: 0
          },
          {
            id: 1,
            name: '待发货',
            img: 'send-gift-o',
            badge: 0
          },
          {
            id: 2,
            name: '待收货',
            img: 'logistics',
            badge: 0
          },
          {
            id: 3,
            name: '待评价',
            img: 'chat-o',
            badge: 0
          },
          {
            id: 4,
            name: '退款/售后',
            img: 'after-sale',
            badge: 0
          }
        ]
      }
    },
    methods: {
      ...mapMutations(['SET_GOODS_ORDER_ME']),
      onColek() {
        localStorage.setItem('userToken', '')
        router.push('Home')
      },
      getOrderMe() {
        this.$api.homeData.goods_Order(this.userNick, 'get').then(res => {
          this.SET_GOODS_ORDER_ME(res.data)
        })
      }
    },
    computed: {
      ...mapState(['goods_order_me'])
    },
    created() {
      if (this.userNick === '') {
        router.push('/Login')
        this.$toast('这就为您跳转登录哦')
      }
      this.getOrderMe()
      setTimeout(() => {
        for (const i in this.goods_order_me) {
          this.myorderlist[this.goods_order_me[i].status].badge++
          this.myorderlist[this.goods_order_me[i].status].item = this.goods_order_me.filter(x => x.status === this
            .goods_order_me[i].status)
        }
      }, 500)
    }
  }
</script>

<style>
</style>
